{% extends "base.html" %}

{% block title %}可用性监控{% endblock %}

{% block head %}
{{ super() }}
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    可用性监控
    <!--    <small>运维大盘</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li class="active">可用性监控</li>
  </ol>

</section>

<!-- 页面内容 -->
<section class="content">
  <div class="box">
    <div class="box-header">
      <h3 class="box-title" id="title"></h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
      <!-- 站点可用性（方块） -->
      <div class="row">
        <div id="main" style="width:100%; height:400px;"></div>
      </div>
      <!-- /.row -->
    </div>


  </div>

</section>
<!-- /.页面内容 -->
{% endblock %}

{% block script %}
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
    // 解析URL
    var pathName = window.document.location.pathname;
    var pathList = pathName.split("/")
    console.log(pathList)
    site_id = pathList[3]

    var time, up, duration;

    $(function () {
        let url = "/api/v1/aval/history/" + site_id
        $.ajax({
            url: url,
            success: function (data) {
                console.log(data)
                // 标题
                let text = "站点：" + data.data.name + "（" + data.data.url + "）"
                console.log(text)
                $('#title').text(text)
                // 绘制图表
                time = data.data.time;
                up = data.data.up;
                duration = data.data.duration;
                draw('main', time, duration, up)
            }
        })

    })

    function draw(elemId, x, y1, y2) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(elemId));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {show: true},
                    saveAsImage: {show: true},

                }
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 95,
                    end: 100
                },
            ],
            legend: {
                data: ['延迟', 'up']
            },
            xAxis: {
                data: x
            },
            yAxis: [
                {
                    type: 'value',
                    name: '延迟',
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: '#5572C3'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} s'
                    }
                },
                {
                    type: 'value',
                    name: 'up',
                    min: 0,
                    max: 1,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: '#93CB79'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
            ],
            series: [
                {
                    name: '延迟',
                    type: 'line',
                    data: y1,
                    symbol: 'none'
                },
                {
                    name: 'up',
                    type: 'line',
                    data: y2,
                    symbol: 'none'
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


</script>
{% endblock %}